<template>
  <a-card
    :bordered="false"
    :body-style="{
      borderRight: '1px solid #e8e8e8',
      height: 'calc(100vh - 120px - 50px)'
    }"
  >
    <template #title>
      <a-divider
        direction="vertical"
        style="background-color: #1890ff; width: 20px; height: 32px"
      ></a-divider>
      <span class="section__left">组件库</span>
    </template>
    <a-row :gutter="[10, 10]">
      <a-divider orientation="center">基础字段</a-divider>
      <draggable
        v-model="elementList"
        :group="group"
        animation="300"
        :sort="false"
        :forceFallback="true"
        class="draggable_chunk"
        handle=".base_chunk"
      >
        <a-col
          :span="12"
          class="base_chunk"
          v-for="item in elementList"
          :key="item.cid"
          @click.stop="addClick(item)"
        >
          <component :is="getIconComp(item.icon)" class="item-icon" />
          <span class="item-text">{{ item.name }}</span>
        </a-col>
      </draggable>
      <a-divider orientation="center"> 特殊字段 </a-divider>
      <draggable
        v-model="specialList"
        :group="group"
        animation="300"
        :sort="false"
        :forceFallback="true"
        class="draggable_chunk"
        handle=".base_chunk"
      >
        <a-col
          :span="12"
          class="base_chunk"
          v-for="item in specialList"
          :key="item.type"
          @click.stop="addClick(item)"
        >
          <component :is="getIconComp(item.icon)" class="item-icon" />
          <span class="item-text">{{ item.name }}</span>
        </a-col>
      </draggable>
    </a-row>
  </a-card>
</template>

<script>
import { nanoid } from "nanoid";
import _ from "lodash";
export default {
  name: "FromLeft",
  components: {},
  data() {
    return {
      elementList: [
        {
          icon: "edit",
          type: "input",
          name: "输入框",
          isSendData: true,
          formData: {},
        },
        {
          icon: "form",
          type: "textarea",
          name: "多行文本框",
          isSendData: true,
          formData: {},
        },
        {
          icon: "ordered-list",
          type: "inputNumber",
          name: "数字输入框",
          isSendData: true,
          formData: {},
        },
        {
          icon: "down-circle",
          type: "select",
          name: "下拉选择",
          isSendData: true,
          formData: {},
        },
        {
          icon: "check-circle",
          type: "radio",
          name: "单选框",
          isSendData: true,
          formData: {},
        },
        {
          icon: "check-square",
          type: "checkbox",
          name: "多选框",
          isSendData: true,
          formData: {},
        },
        {
          icon: "to-top",
          type: "upload",
          name: "上传",
          isSendData: true,
          formData: {},
        },
        {
          icon: "poweroff",
          type: "switch",
          name: "开关",
          isSendData: true,
          formData: {},
        },
        {
          icon: "calendar",
          type: "datePicker",
          name: "日期选择框",
          isSendData: true,
          formData: {},
        },
        {
          icon: "clock-circle",
          type: "timePicker",
          name: "时间选择框",
          isSendData: true,
          formData: {},
        },
        {
          icon: "read",
          type: "divModel",
          name: "文字",
          isSendData: true,
          formData: {},
        },
        {
          icon: "align-left",
          type: "editor",
          name: "富文本框",
          isSendData: true,
          formData: {},
        },
        {
          icon: "down-circle",
          type: "cascader",
          name: "级联选择",
          isSendData: true,
          formData: {},
        },
        {
          icon: "down-circle",
          type: "treeSelect",
          name: "树型选择",
          isSendData: true,
          formData: {},
        },
      ],
      specialList: [
        {
          icon: "minus",
          type: "divider",
          name: "分隔线",
          isSendData: false,
          formData: {},
        },
        {
          icon: "key",
          type: "keyValueInput",
          name: "键值对输入",
          isSendData: true,
          formData: {},
        },
        {
          icon: "apartment",
          type: "tree",
          name: "树形控件",
          isSendData: true,
          formData: {},
        },
        {
          icon: "laptop",
          type: "countFormula",
          name: "计算公式",
          isSendData: true,
          formData: {},
        },
        {
          icon: "container",
          type: "table",
          name: "表格",
          isSendData: true,
          formData: {},
        },
        {
          icon: "bars",
          type: "timeline",
          name: "时间轴",
          isSendData: false,
          formData: {},
        },
      ],
      group: {
        name: "fitment",
        pull: "clone", // 可以拖出
        sort: false,
        put: false, // 可以拖入
      },
    };
  },
  inject: ["dataObj"],
  methods: {
    addClick(item) {
      if (item === undefined) {
        // 没有值是基本内容的新增
        item = this.elementList[0];
      }
      const data = _.cloneDeep(item);
      data.cid = nanoid();
      this.dataObj.pageData.push(_.cloneDeep(data));
      this.dataObj.selectIndex = this.dataObj.pageData.length - 1;
      // console.log(this.dataObj.selectIndex)
    },
    // 将数据里的 icon 字符串转换为全局注册的 Arco 图标组件名
    getIconComp(iconKey) {
      const aliasMap = {
        form: "edit",
        cascader: "down-circle",
        treeSelect: "tree",
        table: "container",
        timeline: "bars",
        upload: "to-top",
        read: "book",
      };
      const key = aliasMap[iconKey] || iconKey;
      return `icon-${key}`; // 依赖于 main.ts 中 app.use(ArcoVueIcon)
    },
  },
};
</script>

<style lang="less" scoped>
/* 让卡片 body 仅在交互时显示滚动条 */
:deep(.arco-card-body) {
  overflow: auto;
  /* Firefox 默认隐藏，悬停时显示 */
  scrollbar-width: none;
}
:deep(.arco-card-body:hover) {
  scrollbar-width: thin;
}
/* WebKit 滚动条：默认透明，悬停时显示拇指 */
:deep(.arco-card-body::-webkit-scrollbar) {
  width: 6px;
  height: 6px;
  background: transparent;
}
:deep(.arco-card-body::-webkit-scrollbar-thumb) {
  background-color: transparent;
  border-radius: 4px;
}
:deep(.arco-card-body:hover::-webkit-scrollbar-thumb) {
  background-color: rgba(0, 0, 0, 0.2);
}
.draggable_chunk {
  display: grid;
  /* 自适应列：最小140px，空间不足自动变为1列，足够时为2列或更多 */
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  grid-gap: 10px;
  width: 100%;
  // cursor: move; /* 表示元素可被拖动 */
  user-select: none; /* 设置用户是否能够选中文本 */
}
.base_chunk {
  box-sizing: border-box;
  font-size: 12px;
  display: block;
  line-height: 30px;
  position: relative;
  /* 允许换行，避免文字被截断 */
  white-space: normal;
  word-break: break-word;
  color: #333;
  padding: 6px 8px;
  border: 1px solid #f4f6fc;
  background-color: #f4f6fc;
  text-align: center;
  /* 让列内元素充满列宽，由于使用 a-col :span="12" 控制为两列，这里不再自设宽度/浮动 */
  &:hover {
    box-sizing: border-box;
    border: dashed 2px #1890ff;
    padding: 4px 6px;
  }
}
/* 放大图标与文字间距 */
.item-icon {
  font-size: 20px;
  margin-right: 8px;
  vertical-align: middle;
}
.item-text {
  vertical-align: middle;
}
.ghostClass {
  width: 100% !important;
  height: 110px !important;
  border: dashed 2px #1890ff !important;
  border-radius: 15px !important;
  margin: 0 auto;
  div,
  img {
    display: none !important;
  }
}

.ghostClass::before {
  content: "我要放在这里～";
  display: inline-flex;
  width: 100% !important;
  height: 100% !important;
  justify-content: center;
  align-items: center;
}
</style>
